/* ===== round 8 ===== */

/* the essential-materials bar: bottom centre, right above the belt */
#res{position:absolute!important;right:auto!important;left:50%!important;top:auto!important;bottom:98px!important;transform:translateX(-50%);flex-direction:row!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center;gap:6px!important;max-width:min(880px,72vw)!important;pointer-events:none}
#res .rchip{background:rgba(6,22,20,.72);border:1px solid #1d5a4a;border-radius:14px;padding:2px 10px;font-size:12px}
#feed{bottom:168px!important}

/* the old static objectives box is replaced by the pop-up card */
#quest{display:none!important}
#trk8{position:fixed;left:16px;top:250px;width:290px;z-index:19;pointer-events:none;background:linear-gradient(90deg,rgba(6,26,22,.92),rgba(6,26,22,.7));border:1px solid #1d7a62;border-left:4px solid #3dff9e;border-radius:0 10px 10px 0;padding:8px 12px 10px;color:#d8fff0;font:600 12px Trebuchet MS,Arial,sans-serif;transform:translateX(-340px);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.2,1),opacity .35s}
#trk8.on{transform:none;opacity:1}
#trk8 h5{margin:0 0 6px;font-size:10px;letter-spacing:.24em;color:#3dff9e}
#trk8 .q{display:flex;gap:8px;align-items:center;margin:5px 0;line-height:1.3}#trk8 .q img{width:30px;height:30px;border-radius:50%;border:1px solid #2a7a62}#trk8 .q b{color:#ffd24d}#trk8 .q.rdy b{color:#6bffb0}
#trk8 .m{margin-top:7px;padding-top:6px;border-top:1px solid #1d5a4a;color:#8fb3a6;font-size:11px}

/* small level-up by the XP bar */
#lvl8{position:fixed;z-index:30;pointer-events:none;display:flex;align-items:center;gap:8px;padding:3px 12px;border-radius:14px;background:linear-gradient(90deg,#4a3500,#8a6a10);border:1px solid #ffd24d;color:#fff4c8;font:800 13px Trebuchet MS,Arial,sans-serif;letter-spacing:.08em;box-shadow:0 0 14px rgba(255,210,77,.55);opacity:0;transform:translateX(-18px) scale(.9)}
#lvl8 .a{color:#ffd24d;animation:lv8 .5s ease-out 2}#lvl8 small{font-weight:600;font-size:10px;color:#ffe9a0;letter-spacing:.04em}
#lvl8.on{animation:lv8in 1.9s ease-out forwards}
@keyframes lv8in{0%{opacity:0;transform:translateX(-18px) scale(.9)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
@keyframes lv8{0%{transform:translateY(5px)}50%{transform:translateY(-3px)}100%{transform:none}}

/* icon costs */
.ic8row{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.ic8{display:inline-flex;align-items:center;gap:3px;padding:1px 7px 1px 4px;border-radius:11px;font-size:12px;border:1px solid;background:rgba(0,0,0,.35);line-height:1.5}
.ic8 em{font-style:normal;font-size:14px}.ic8 b{font-weight:800}
.ic8.ok{border-color:#2fbf7a;color:#8dffbe;background:rgba(20,90,60,.4)}.ic8.no{border-color:#c04a4a;color:#ff9a9a;background:rgba(110,24,24,.4)}
.bitem small .ic8row{justify-content:center}.bitem small .ic8{font-size:11px;padding:0 5px 0 3px}

/* hearth bar */
#hh8{position:fixed;left:50%;top:64px;transform:translate(-50%,-14px);width:min(460px,60vw);z-index:22;pointer-events:none;opacity:0;transition:opacity .3s,transform .3s;display:flex;align-items:center;gap:10px;color:#ffe2b0;font:800 11px Trebuchet MS,Arial,sans-serif;letter-spacing:.16em}
#hh8.on{opacity:1;transform:translate(-50%,0)}
#hh8 span{white-space:nowrap}#hh8 b{font-weight:700;color:#cfd8d4;letter-spacing:.04em;min-width:90px;text-align:right}
#hh8 i{flex:1;height:14px;border:2px solid #7a4a1a;border-radius:8px;background:rgba(20,8,0,.78);overflow:hidden;box-shadow:0 0 12px rgba(255,150,40,.3)}
#hh8 u{display:block;height:100%;background:linear-gradient(90deg,#ff7a1a,#ffd24d);border-radius:6px;transition:width .25s}
#hh8.low i{border-color:#ff3a3a;animation:hh8 .5s infinite alternate}#hh8.low u{background:linear-gradient(90deg,#c01818,#ff6a3a)}
#hh8.hit i{box-shadow:0 0 18px rgba(255,60,40,.9)}
@keyframes hh8{to{box-shadow:0 0 16px rgba(255,50,50,.9)}}

/* game over */
#over8{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(40,6,0,.82),rgba(0,0,0,.96));color:#ffe2d0;text-align:center}
#over8.on{display:flex;animation:ov8 1.4s ease-out}@keyframes ov8{from{opacity:0}}
#over8 .o8in{max-width:620px;padding:30px}#over8 .o8k{letter-spacing:.4em;font-size:12px;color:#ff9a5a}#over8 h1{margin:8px 0 14px;font-size:68px;letter-spacing:.14em;color:#ff4a3a;text-shadow:0 0 30px rgba(255,60,30,.7)}
#over8 p{color:#d8b8a8;line-height:1.6}#over8 .o8s{color:#ffd0a0;letter-spacing:.08em;font-weight:700}#over8 .o8b{margin-top:22px;display:flex;gap:14px;justify-content:center}
#over8 button{padding:12px 24px;background:#7a2a10;border:1px solid #ff8a4a;color:#fff;font:800 13px Trebuchet MS,Arial,sans-serif;letter-spacing:.14em;border-radius:6px;cursor:pointer}#over8 button.alt{background:transparent}#over8 button:hover{filter:brightness(1.3)}

/* sleep */
#sleep8{position:fixed;inset:0;z-index:40;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(ellipse at center,rgba(4,8,30,.55),rgba(2,3,14,.93));opacity:0;transition:opacity 1.2s;color:#bcd0ff}
#sleep8.on{opacity:1}#sleep8 .z b{font-size:46px;margin:0 6px;display:inline-block;animation:z8 2.4s infinite;opacity:.0}#sleep8 .z b:nth-child(2){animation-delay:.5s;font-size:36px}#sleep8 .z b:nth-child(3){animation-delay:1s;font-size:28px}
@keyframes z8{0%{opacity:0;transform:translateY(14px)}40%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
#sleep8 .t{font:700 15px Trebuchet MS,Arial,sans-serif;letter-spacing:.14em}#sleep8 small{opacity:.6;letter-spacing:.1em}

/* the title: glitch + 3D survivors */
#intro .logo{position:relative}
#intro .logo.gl8{animation:gl8 .7s steps(2,end)}
#intro .logo::before,#intro .logo::after{content:attr(data-t);position:absolute;left:0;right:0;top:0;opacity:0;pointer-events:none}
#intro .logo.gl8::before{opacity:.8;color:#ff2a6a;transform:translate(-5px,1px);clip-path:inset(10% 0 55% 0);animation:gl8a .7s steps(3,end)}
#intro .logo.gl8::after{opacity:.8;color:#2affea;transform:translate(5px,-1px);clip-path:inset(55% 0 8% 0);animation:gl8b .7s steps(4,end)}
@keyframes gl8{0%{opacity:1}8%{opacity:.15}14%{opacity:1}22%{opacity:.35;transform:skewX(8deg)}30%{opacity:1;transform:none}46%{opacity:.1}52%{opacity:1}70%{opacity:.5;transform:translateX(3px)}100%{opacity:1;transform:none}}
@keyframes gl8a{0%{clip-path:inset(0 0 80% 0)}33%{clip-path:inset(40% 0 30% 0)}66%{clip-path:inset(70% 0 5% 0)}100%{clip-path:inset(20% 0 60% 0)}}
@keyframes gl8b{0%{clip-path:inset(60% 0 10% 0)}50%{clip-path:inset(5% 0 70% 0)}100%{clip-path:inset(35% 0 40% 0)}}
#pasts.p3d{display:flex;gap:14px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
#pasts.p3d .past{width:196px;min-height:0;padding:8px 10px 10px;text-align:center;position:relative;transition:transform .25s,opacity .25s,filter .25s,box-shadow .25s}
#pasts.p3d .past .p3stage{height:230px;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
#pasts.p3d .past img{height:230px;image-rendering:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));transition:transform .3s}
#pasts.p3d .past .d{display:block;font-size:11px;opacity:.75;margin-top:4px}
#pasts.p3d .past .st{list-style:none;margin:6px 0 0;padding:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s,opacity .3s;font-size:11px;color:#9dffd0;text-align:left}
#pasts.p3d .past .st li::before{content:'▸ ';color:#3dff9e}
#pasts.p3d .past:hover{transform:translateY(-10px) scale(1.14);z-index:5;box-shadow:0 0 28px rgba(61,255,158,.45);filter:none;opacity:1}
#pasts.p3d .past:hover img{transform:scale(1.06)}
#pasts.p3d .past:hover .st{max-height:140px;opacity:1}
#pasts.p3d.hov .past:not(:hover){opacity:.5;filter:saturate(.5) brightness(.8)}
#pasts.p3d .past.sel{box-shadow:0 0 0 2px #3dff9e}

/* achievements & milestones */
#ach8{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(2,10,8,.78)}
#ach8.on{display:flex}
#ach8 .box{width:min(1100px,94vw);height:min(760px,90vh);background:rgba(7,24,21,.97);border:1px solid #1d7a62;border-radius:14px;display:flex;flex-direction:column;color:#d8fff0;font:600 13px Trebuchet MS,Arial,sans-serif;box-shadow:0 0 40px rgba(0,0,0,.7)}
#ach8 .hd{display:flex;align-items:center;gap:18px;padding:14px 20px;border-bottom:1px solid #1d5a4a}#ach8 .hd h2{margin:0;letter-spacing:.2em;font-size:18px;color:#3dff9e}#ach8 .hd .sum{flex:1;color:#8fb3a6}#ach8 .hd .x{cursor:pointer;font-size:22px;padding:0 8px}
#ach8 .tabs{display:flex;gap:6px;padding:10px 20px 0;flex-wrap:wrap}#ach8 .tab{padding:6px 14px;border:1px solid #1d5a4a;border-bottom:none;border-radius:8px 8px 0 0;cursor:pointer;color:#8fb3a6;letter-spacing:.08em}#ach8 .tab.sel{background:rgba(20,70,56,.7);color:#fff;border-color:#2fbf7a}
#ach8 .body{flex:1;overflow:auto;padding:14px 20px;border-top:1px solid #1d5a4a}
#ach8 .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
#ach8 .bar{padding:9px 12px;border:1px solid #1d5a4a;border-radius:9px;background:rgba(10,36,30,.6)}#ach8 .bar b{display:flex;justify-content:space-between;gap:8px}#ach8 .bar small{color:#8fb3a6}
#ach8 .bar i{display:block;height:8px;border-radius:5px;background:#05140f;margin:6px 0 3px;overflow:hidden;border:1px solid #14483a}#ach8 .bar u{display:block;height:100%;background:linear-gradient(90deg,#1fbf7a,#9dff6a)}
#ach8 .bd{padding:10px 12px;border:1px solid #1d5a4a;border-radius:9px;background:rgba(10,36,30,.5);display:flex;gap:10px;align-items:center}#ach8 .bd .ic{font-size:26px;width:38px;text-align:center}#ach8 .bd.lock{opacity:.45;filter:grayscale(.8)}
#ach8 .bd b{display:block}#ach8 .bd small{color:#8fb3a6;display:block;line-height:1.35}#ach8 .bd .xp{margin-left:auto;color:#ffd24d;font-size:11px;white-space:nowrap}
#ach8 .bd.sp{border-color:#c8a24a;background:rgba(60,44,8,.45)}#ach8 .flt{display:flex;gap:8px;margin:0 0 10px;flex-wrap:wrap}#ach8 .flt span{padding:3px 10px;border:1px solid #1d5a4a;border-radius:12px;cursor:pointer;font-size:11px}#ach8 .flt span.sel{background:#14483a;border-color:#2fbf7a}
#achpop8{position:fixed;left:16px;top:190px;z-index:31;display:flex;flex-direction:column;gap:6px;pointer-events:none}
#achpop8 .ap{display:flex;gap:10px;align-items:center;min-width:250px;max-width:320px;padding:7px 12px;border-radius:0 12px 12px 0;background:linear-gradient(90deg,rgba(40,30,4,.95),rgba(14,24,20,.88));border:1px solid #c8a24a;border-left:4px solid #ffd24d;color:#fff4d0;animation:ap8 4.6s ease-out forwards;font:600 12px Trebuchet MS,Arial,sans-serif}
#achpop8 .ap.mi{border-color:#2fbf7a;border-left-color:#3dff9e;background:linear-gradient(90deg,rgba(6,34,28,.95),rgba(14,24,20,.85));padding:5px 10px}
#achpop8 .ap .ic{font-size:24px}#achpop8 .ap b{display:block;letter-spacing:.04em}#achpop8 .ap small{display:block;color:#e8d8a0;opacity:.85}#achpop8 .ap em{margin-left:auto;font-style:normal;color:#ffd24d;font-weight:800;font-size:11px}
@keyframes ap8{0%{transform:translateX(-340px);opacity:0}8%{transform:none;opacity:1}86%{opacity:1}100%{transform:translateX(-340px);opacity:0}}