/* Furling Games home: cream ground, keycap boxes, pink accent. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fcf5e7;color:#141414;font-family:'Nunito',system-ui,sans-serif;font-size:17px;line-height:1.55}
a{color:#a0304a}a:hover{color:#141414}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.h{font-family:'Lilita One','Arial Rounded MT Bold',sans-serif;font-weight:400}
.lab{font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:13px}
.hand{font-family:'Caveat','Comic Sans MS',cursive;font-weight:700;color:#a0304a}
.bx{background:#fff;border:3px solid #141414;border-radius:16px;box-shadow:0 7px 0 #141414}

/* buttons */
.bt{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 22px;border:3px solid #141414;border-radius:14px;box-shadow:0 5px 0 #141414;background:#fff;color:#141414;font-weight:800;font-size:17px;text-decoration:none;white-space:nowrap}
.bt:hover{color:#141414;transform:translateY(2px);box-shadow:0 3px 0 #141414}
.bt-p{background:#141414;color:#fcf5e7;box-shadow:0 5px 0 #ef8f96}
.bt-p:hover{color:#fcf5e7;box-shadow:0 3px 0 #ef8f96}

/* top bar (shared with the game pages) */
.bar{background:#fcf5e7;border-bottom:3px solid #141414}
.bar-in{max-width:1160px;margin:0 auto;padding:8px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.bar a{color:#141414;text-decoration:none;font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;min-height:44px;display:flex;align-items:center}
.bar a:hover{color:#a0304a}
.bar img{height:36px;width:auto;display:block}
.bar nav{display:flex;flex-wrap:wrap;gap:24px}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-top:72px}
.hero-t{flex:999 1 440px;min-width:0;display:flex;flex-direction:column;gap:22px}
.hero h1{margin:0;font-size:76px;line-height:.98;text-wrap:balance}
.lead{margin:0;font-size:20px;line-height:1.55;max-width:42ch}
.btns{display:flex;flex-wrap:wrap;gap:16px;padding-top:6px}
.portrait{flex:0 0 auto;margin:0 auto;padding:12px;position:relative}
.portrait-in{width:200px;height:270px;border-radius:10px;background:#fbe1e3;border:2px solid #141414;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.portrait-in img{width:168px;height:auto;display:block;image-rendering:pixelated;margin-bottom:-4px}

/* paper scrap: torn edges via clip-path on the inner span, so the shadow sits on the wrapper */
.tag{position:absolute;bottom:-24px;right:-36px;rotate:-6deg;filter:drop-shadow(1px 3px 2px rgba(20,20,20,.25))}
.tag span{position:relative;display:block;font-size:42px;line-height:1;padding:10px 26px 14px;background:repeating-linear-gradient(transparent 0 17px,rgba(160,48,74,.12) 17px 18px),#fffaf0;
  clip-path:polygon(2% 7%,14% 1%,30% 5%,47% 0,65% 5%,83% 1%,98% 5%,100% 23%,97% 41%,100% 60%,98% 79%,100% 96%,84% 100%,66% 95%,48% 99%,31% 95%,15% 100%,1% 94%,3% 75%,0 56%,2% 37%,0 19%)}
.tag::before{content:"";position:absolute;z-index:1;top:-10px;left:50%;width:58px;height:20px;margin-left:-29px;rotate:5deg;background:rgba(239,143,150,.75);
  clip-path:polygon(3% 0,97% 0,100% 18%,96% 36%,100% 54%,96% 72%,100% 90%,97% 100%,3% 100%,0 86%,4% 68%,0 50%,4% 32%,0 14%)}

/* games */
.games{display:flex;flex-direction:column;gap:30px;padding-top:104px}
.sec-h{margin:0;font-size:46px;line-height:1.05}
.feat{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:32px;padding:18px}
.shot{flex:1 1 420px;min-width:0;border:3px solid #141414;border-radius:10px;overflow:hidden;background:#08141d}
.shot img{display:block;width:100%;height:auto}
.feat-t{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:6px 8px}
.feat-t .lab{color:#a0304a}
.feat-name{margin:0;font-size:44px;line-height:1.05}
.feat-t p{margin:0;max-width:40ch}
.feat-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding-top:8px}
.feat-links span{display:flex;gap:16px;font-weight:800;font-size:15px}
.more{border:3px dashed #141414;border-radius:16px;padding:22px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.more b{font-weight:800}
.more span{color:#5f574a}

/* launch switch: add class="launched" to <body> once Sector Defence is in the stores */
body:not(.launched) .if-out{display:none}
body.launched .if-soon{display:none}

/* status sash: red and gold once a game is out, plain white before */
.sash{position:absolute;top:30px;right:-58px;rotate:40deg;z-index:2;pointer-events:none}
.sash b{display:block;position:relative;overflow:hidden;white-space:nowrap;text-align:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase;line-height:12px;padding:10px 58px;
  --b1:#e3485c;--b2:#c8263d;--b3:#a81a31;--tr1:#f6c94c;--tr2:#b57f22;color:#fff4cf;text-shadow:2px 2px 0 #6e0f20;
  background:linear-gradient(90deg,var(--tr1) 0 4px,var(--tr2) 4px 8px) 0 0/8px 3px repeat-x,linear-gradient(90deg,var(--tr2) 0 4px,var(--tr1) 4px 8px) 0 100%/8px 3px repeat-x,linear-gradient(var(--b1) 0 34%,var(--b2) 34% 70%,var(--b3) 70%);
  box-shadow:0 -2px 0 #141414,0 2px 0 #141414,0 5px 0 rgba(20,20,20,.22)}
.sash b i{display:inline-block;width:6px;height:6px;background:#f6c94c;rotate:45deg;margin:0 8px;vertical-align:1px;box-shadow:0 0 0 2px #6e0f20}
.sash.soon b{--b1:#fff;--b2:#fff;--b3:#f1e7d3;--tr1:transparent;--tr2:transparent;color:#141414;text-shadow:none}
.sash.soon b i{display:none}
.sash b::after{content:"";position:absolute;top:0;bottom:0;left:-40px;width:16px;background:rgba(255,255,255,.5);transform:skewX(-20deg)}
@keyframes shine{from{left:-40px}to{left:calc(100% + 40px)}}
.feat:hover .sash b::after{animation:shine .7s ease-out}

/* footer */
.ft{background:#141414;color:#fcf5e7;margin-top:110px}
.ft a{color:#fcf5e7}.ft a:hover{color:#ef8f96}
.ft-in{padding-top:60px;padding-bottom:32px;display:flex;flex-direction:column;gap:40px}
.hello{display:flex;flex-direction:column;gap:10px}
.hello p{margin:0;color:#e6dcc6}
.mail{font-size:28px;font-weight:800;text-decoration:none}
.ft a.mail{color:#ef8f96}
.socials{display:flex;flex-wrap:wrap;gap:12px;padding-top:10px}
.soc{display:inline-flex;flex-direction:column;justify-content:center;min-height:56px;padding:6px 16px;border:2px solid #3a3a3a;border-radius:12px;text-decoration:none;line-height:1.3}
.soc:hover{border-color:#ef8f96}
.soc .lab{font-size:11px;color:#c9bfa9}
.soc b{font-weight:800;font-size:16px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;padding-top:22px;border-top:1px solid #3a3a3a;font-size:15px;color:#e6dcc6}
.legal-name{display:flex;align-items:center;gap:14px}
.legal-mark{background:#fcf5e7;border-radius:10px;padding:6px 10px;line-height:0}
.legal-mark img{height:28px;width:auto}
.legal nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-weight:800}
.legal nav span{font-weight:600;color:#c9bfa9}

@media (prefers-reduced-motion:reduce){.feat:hover .sash b::after{animation:none}.bt:hover{transform:none}}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .bar-in{padding-left:16px;padding-right:16px}
  .hero{padding-top:44px;gap:36px}
  .hero h1{font-size:50px}
  .portrait{margin-bottom:12px}
  .tag{right:-16px}
  .sec-h{font-size:38px}
  .feat-name{font-size:36px}
  .mail{font-size:22px}
}