@font-face{font-family:"Lilita One";src:url('/fonts/lilita-one.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-latin-variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}

/* Dock Jam showcase: a sunny cartoon harbour, colours and type taken from the game (navy outlines, cream cards, candy cargo). */
.dockjam-page{
  --dj-sky:#5cc2f2;--dj-sky-deep:#2a98dd;--dj-sea:#1678c4;--dj-sea-deep:#0d4f8f;
  --dj-navy:#22335f;--dj-navy-soft:#3a4d7d;--dj-cream:#fff8ec;--dj-cream-2:#fdeed4;--dj-paper:#f5f9ff;
  --dj-sun:#ffd34d;--dj-orange:#f58a2c;--dj-orange-deep:#d96d14;--dj-green:#4cc35a;--dj-green-deep:#2f9a3d;
  --dj-red:#ec5246;--dj-yellow:#ffc93c;--dj-blue:#2fa6e8;
  --dj-text:#22335f;--dj-muted:#4f5f86;--dj-display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --dj-radius:30px;--dj-outline:4px solid var(--dj-navy);--dj-pop:0 7px 0 var(--dj-navy);
  color-scheme:light;color:var(--dj-text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--dj-paper);
}
.dockjam-page .shell{width:min(100% - 80px,1240px)}
.dockjam-page h1,.dockjam-page h2,.dockjam-page h3{text-wrap:balance}
.dockjam-page em{font-style:normal}
.dockjam-page img{height:auto}

/* Header and footer in the harbour's colours */
.dockjam-page .site-header{position:sticky;top:0;z-index:30;background:#2a98ddeb;border-bottom:3px solid var(--dj-navy);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}
.dockjam-page .product-brand{font-family:var(--dj-display);font-weight:400;letter-spacing:.01em;color:#fff;-webkit-text-stroke:1px var(--dj-navy);paint-order:stroke fill}
.dockjam-page .product-brand img{border-radius:10px;border:2px solid var(--dj-navy)}
.dockjam-page .header-nav a{color:#fff}
.dockjam-page .header-link{border-radius:99px;border:2px solid var(--dj-navy);background:var(--dj-cream);color:var(--dj-navy)!important;padding:9px 16px;font-weight:700}
.dockjam-page .header-link:hover{background:var(--dj-sun)}
.dockjam-page .site-footer{background:var(--dj-navy);border-top:0}
.dockjam-page .footer-bottom{border-top-color:#ffffff22}

/* Shared pieces */
.dj-label{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;padding:8px 18px 9px;border:3px solid var(--dj-navy);border-radius:99px;background:var(--dj-sun);color:var(--dj-navy);font:400 15px/1 var(--dj-display);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 0 var(--dj-navy)}
.dj-section{padding-block:120px}
.dj-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end;margin-bottom:56px}
.dj-head>p{max-width:440px;margin:0 0 10px auto;color:var(--dj-muted);font-size:18px;line-height:1.6}
.dockjam-page h2:not(.dj-label){margin:0;font:400 clamp(44px,5.6vw,82px)/.98 var(--dj-display);letter-spacing:.005em;color:var(--dj-navy)}
.dockjam-page h2 em{color:var(--dj-orange);-webkit-text-stroke:3px var(--dj-navy);paint-order:stroke fill}
.dj-card{position:relative;overflow:hidden;padding:30px;border:var(--dj-outline);border-radius:var(--dj-radius);background:var(--dj-cream);box-shadow:var(--dj-pop)}
.dj-card h3{margin:14px 0 10px;font:400 clamp(25px,2.2vw,32px)/1.05 var(--dj-display);color:var(--dj-navy)}
.dj-card p{margin:0;color:var(--dj-muted);font-size:15.5px;line-height:1.6}
.dj-card-tag{display:inline-block;padding:6px 12px 7px;border-radius:99px;background:var(--dj-navy);color:#fff;font:400 13px/1 var(--dj-display);letter-spacing:.05em;text-transform:uppercase}
.dj-phone{position:absolute;aspect-ratio:9/16;width:270px;padding:9px;border:4px solid var(--dj-navy);border-radius:38px;background:#fff;box-shadow:0 10px 0 var(--dj-navy),0 40px 60px -20px #0d4f8f80}
.dj-phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:28px}

/* Cargo: chunky containers with their symbols, as in the game */
.dj-box{--c:var(--dj-blue);position:relative;display:inline-grid;place-items:center;width:64px;height:54px;border:3px solid var(--dj-navy);border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 78%,#fff) 0 22%,var(--c) 22% 100%);box-shadow:inset 0 -6px 0 color-mix(in srgb,var(--c) 75%,#000),0 4px 0 var(--dj-navy)}
.dj-box:before{content:"";position:absolute;inset:16px 9px 9px;background:repeating-linear-gradient(90deg,transparent 0 7px,#0000001c 7px 9px);border-radius:4px}
.dj-box-red{--c:var(--dj-red)}.dj-box-yellow{--c:var(--dj-yellow)}.dj-box-blue{--c:var(--dj-blue)}.dj-box-green{--c:var(--dj-green)}.dj-box-orange{--c:var(--dj-orange)}.dj-box-navy{--c:#1f6fc0}
.dj-sym{position:relative;z-index:1;display:block;width:22px;height:22px;margin-top:8px;background:#fff}
.dj-sym-circle{border-radius:50%}
.dj-sym-square{width:19px;height:19px;border-radius:3px}
.dj-sym-triangle{clip-path:polygon(50% 6%,96% 92%,4% 92%)}
.dj-sym-diamond{clip-path:polygon(50% 2%,96% 50%,50% 98%,4% 50%)}
.dj-sym-star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 92%,50% 70%,21% 92%,32% 57%,2% 35%,39% 35%)}

/* Hero */
.dj-hero{position:relative;overflow:hidden;padding-block:56px 150px;background:linear-gradient(180deg,#8fd6f7 0%,var(--dj-sky) 45%,var(--dj-sky-deep) 100%)}
.dj-sky{position:absolute;inset:0;pointer-events:none}
.dj-cloud{position:absolute;height:70px;border-radius:99px;background:#fff;opacity:.9;box-shadow:40px -26px 0 6px #fff,90px -6px 0 -4px #fff}
.dj-cloud-1{width:170px;left:4%;top:120px;animation:dj-drift 40s linear infinite}
.dj-cloud-2{width:130px;left:48%;top:60px;opacity:.7;transform:scale(.8);animation:dj-drift 55s linear infinite reverse}
.dj-cloud-3{width:150px;right:6%;top:300px;opacity:.75;animation:dj-drift 48s linear infinite}
.dj-sun{position:absolute;right:7%;top:42px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#fff6c9 0 40%,#ffe27a 41% 62%,transparent 64%);opacity:.9}
@keyframes dj-drift{50%{translate:40px 0}}
.dj-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:40px;min-height:680px}
.dj-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;padding:6px 16px 6px 6px;border:3px solid var(--dj-navy);border-radius:99px;background:var(--dj-cream);color:var(--dj-navy);font:400 14px/1 var(--dj-display);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 0 var(--dj-navy)}
.dj-kicker img{border-radius:8px}
.dj-hero h1{margin:26px 0 22px}
.dj-wordmark{display:block;width:min(100%,560px);filter:drop-shadow(0 10px 0 #0d4f8f40)}
.dj-tagline{display:block;margin-top:6px;font:400 clamp(30px,3.4vw,46px)/1.05 var(--dj-display);color:#fff;-webkit-text-stroke:6px var(--dj-navy);paint-order:stroke fill;text-shadow:0 6px 0 var(--dj-navy)}
.dj-lede{max-width:520px;margin:0 0 32px;color:#0f2a55;font-size:19px;line-height:1.6;font-weight:500}
.dj-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px}
.dj-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 28px 18px;border:4px solid var(--dj-navy);border-radius:99px;background:linear-gradient(180deg,#76e083,var(--dj-green));box-shadow:inset 0 -6px 0 var(--dj-green-deep),0 6px 0 var(--dj-navy);color:#fff;font:400 22px/1 var(--dj-display);-webkit-text-stroke:1px var(--dj-navy);paint-order:stroke fill;text-decoration:none;transition:transform .15s}
.dj-btn:hover{transform:translateY(-3px)}
.dj-btn:active{transform:translateY(3px)}
.dj-btn svg{width:18px;height:18px}
.dj-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:3px solid var(--dj-navy);border-radius:99px;background:var(--dj-cream);color:var(--dj-navy);font:400 16px/1 var(--dj-display);letter-spacing:.02em}
.dj-chip-dot{width:10px;height:10px;border-radius:50%;background:var(--dj-orange);box-shadow:0 0 0 4px #f58a2c40;animation:dj-pulse 1.8s ease-in-out infinite}
@keyframes dj-pulse{50%{box-shadow:0 0 0 8px #f58a2c10}}
.dj-facts{display:flex;flex-wrap:wrap;gap:14px;margin:38px 0 0;padding:0;list-style:none}
.dj-facts li{display:flex;flex-direction:column;gap:3px;padding:14px 18px;border:3px solid var(--dj-navy);border-radius:20px;background:#ffffffd9;box-shadow:0 4px 0 var(--dj-navy)}
.dj-facts strong{font:400 22px/1 var(--dj-display);color:var(--dj-orange-deep)}
.dj-facts span{font-size:13px;font-weight:600;color:var(--dj-muted)}
.dj-hero-art{position:relative;height:640px}
.dj-phone-back{left:6%;top:70px;width:250px;rotate:-8deg;opacity:.96}
.dj-phone-front{right:4%;top:10px;width:290px;rotate:5deg;z-index:2}
.dj-hero-art .dj-box{position:absolute;z-index:3;width:82px;height:68px;animation:dj-bob 6s ease-in-out infinite}
.dj-hero-art .dj-sym{width:28px;height:28px;margin-top:10px}
.dj-float-1{left:-2%;top:40px;rotate:-12deg}
.dj-float-2{left:46%;bottom:14px;rotate:8deg;animation-delay:-2s!important}
.dj-float-3{right:-4%;bottom:120px;rotate:-6deg;animation-delay:-4s!important}
.dj-sticker{position:absolute;z-index:3;width:92px;filter:drop-shadow(0 8px 0 #0d4f8f55);animation:dj-bob 7s ease-in-out infinite}
.dj-float-4{right:-3%;top:270px;animation-delay:-1s}
.dj-float-5{left:30%;bottom:-6px;width:84px;animation-delay:-3s}
@keyframes dj-bob{50%{translate:0 -14px}}
.dj-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:90px;fill:var(--dj-sea)}

/* Cargo strip */
.dj-strip{background:var(--dj-sea);padding-block:34px 46px;border-bottom:4px solid var(--dj-navy)}
.dj-strip-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.dj-strip .dj-label{margin:0}
.dj-cargo{display:flex;flex-wrap:wrap;gap:22px;margin:0;padding:0;list-style:none}
.dj-cargo li{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font:400 16px/1 var(--dj-display);letter-spacing:.04em}

/* How to play */
.dj-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.dj-step{display:flex;flex-direction:column;border:var(--dj-outline);border-radius:var(--dj-radius);background:var(--dj-cream);box-shadow:var(--dj-pop);overflow:hidden}
.dj-step-screen{height:380px;overflow:hidden;background:linear-gradient(180deg,var(--dj-sky),var(--dj-sky-deep));border-bottom:4px solid var(--dj-navy);display:flex;justify-content:center;padding-top:26px}
.dj-step-screen img{width:220px;border:4px solid var(--dj-navy);border-radius:26px 26px 0 0;border-bottom:0;object-fit:cover;object-position:top;height:auto}
.dj-step-body{position:relative;padding:28px 28px 32px}
.dj-step-num{position:absolute;top:-32px;left:24px;display:grid;place-items:center;width:58px;height:58px;border:4px solid var(--dj-navy);border-radius:50%;background:var(--dj-orange);color:#fff;font:400 30px/1 var(--dj-display);-webkit-text-stroke:1px var(--dj-navy);paint-order:stroke fill;box-shadow:0 4px 0 var(--dj-navy)}
.dj-step h3{margin:18px 0 8px;font:400 30px/1.05 var(--dj-display);color:var(--dj-navy)}
.dj-step p{margin:0;color:var(--dj-muted);font-size:16px;line-height:1.6}

/* Surprises */
.dj-surprises{background:linear-gradient(180deg,#e7f4fd,#d4ecfb);border-block:4px solid var(--dj-navy)}
.dj-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.dj-bento .dj-mini:nth-last-child(-n+2){grid-column:span 2}
.dj-card-photo{grid-column:span 2;grid-row:span 2;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:end;background:linear-gradient(160deg,var(--dj-sun),#ffb84a);padding:34px 30px 0}
.dj-card-photo-copy{align-self:center;padding-bottom:34px}
.dj-card-photo h3{font-size:clamp(30px,2.8vw,40px)}
.dj-card-photo p{color:#5a3a12}
.dj-card-phone{align-self:end;height:380px;overflow:hidden}
.dj-card-phone img{display:block;width:100%;border:4px solid var(--dj-navy);border-bottom:0;border-radius:26px 26px 0 0}
.dj-mini{display:flex;flex-direction:column}
.dj-mini h3{margin-top:18px;font-size:26px}
.dj-mini-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dj-level{padding:5px 10px 6px;border:2px solid var(--dj-navy);border-radius:99px;background:#fff;font:400 13px/1 var(--dj-display);color:var(--dj-navy)}
.dj-art{display:grid;place-items:center;width:74px;height:74px;border:3px solid var(--dj-navy);border-radius:20px;background:#fff}
.dj-art img{width:56px;max-height:56px;object-fit:contain}
.dj-tarp{display:grid;place-items:center;width:54px;height:46px;border:3px solid var(--dj-navy);border-radius:10px;background:repeating-linear-gradient(135deg,#6a78c6 0 6px,#5967b8 6px 12px);color:#fff;font:400 30px/1 var(--dj-display)}
.dj-sign{position:relative;display:grid;place-items:center;width:48px;height:48px;color:var(--dj-navy);font:400 22px/1 var(--dj-display)}
.dj-sign:before{content:"";position:absolute;inset:5px;rotate:45deg;border:3px solid var(--dj-navy);border-radius:7px;background:var(--dj-sun);z-index:-1}
.dj-sign{isolation:isolate}
.dj-block{display:flex;flex-direction:column;align-items:center;gap:2px;font:400 13px/1 var(--dj-display);color:var(--dj-navy)}
.dj-block .dj-box{width:40px;height:30px;border-width:2px;border-radius:7px;box-shadow:inset 0 -3px 0 #0003}
.dj-block .dj-box:before{display:none}
.dj-block .dj-sym{width:12px;height:12px;margin-top:4px}

/* Tools */
.dj-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:0;padding:0;list-style:none}
.dj-tool{padding-top:26px}
.dj-tool-icon{display:grid;place-items:center;width:120px;height:120px;margin-bottom:22px;border:4px solid var(--dj-navy);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e4f3fd);box-shadow:0 6px 0 var(--dj-navy)}
.dj-tool-icon img{width:78px;max-height:84px;object-fit:contain}
.dj-tool h3{font-size:32px}

/* Rewards */
.dj-rewards{background:var(--dj-cream-2);border-block:4px solid var(--dj-navy)}
.dj-rewards-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:50px;align-items:center}
.dj-rewards-copy>p{max-width:520px;margin:26px 0 30px;color:var(--dj-muted);font-size:18px;line-height:1.6}
.dj-reward-list{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.dj-reward-list li{display:flex;align-items:center;gap:18px;padding:16px 20px;border:3px solid var(--dj-navy);border-radius:22px;background:#fff;box-shadow:0 4px 0 var(--dj-navy)}
.dj-reward-list img{width:52px;flex:0 0 52px}
.dj-reward-list span{color:var(--dj-muted);font-size:15px;line-height:1.5}
.dj-reward-list strong{display:block;font:400 21px/1.1 var(--dj-display);color:var(--dj-navy)}
.dj-rewards-art{position:relative;height:600px}
.dj-phone-solo{left:50%;top:10px;translate:-50% 0;width:300px;rotate:-3deg}
.dj-chest{position:absolute;right:2%;bottom:20px;z-index:2;width:190px;filter:drop-shadow(0 10px 0 #22335f40);animation:dj-bob 6s ease-in-out infinite}

/* Call to action */
.dj-cta{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:center;border:var(--dj-outline);border-radius:40px;box-shadow:0 10px 0 var(--dj-navy)}
.dj-cta-art{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:60% 50%}
.dj-cta:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d4f8fe6 0%,#0d4f8fa6 38%,transparent 70%)}
.dj-cta-copy{position:relative;z-index:1;max-width:560px;padding:56px}
.dj-cta h2{color:#fff!important;font-size:clamp(40px,4.6vw,66px)!important;-webkit-text-stroke:4px var(--dj-navy);paint-order:stroke fill;text-shadow:0 6px 0 var(--dj-navy)}
.dj-cta p{margin:18px 0 26px;color:#fff;font-size:18px;line-height:1.6;font-weight:500}

/* Support */
.dj-links-section{padding-block:40px 120px}
.dj-links-section h2{margin-bottom:40px!important}
.dj-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dj-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 28px;border:var(--dj-outline);border-radius:24px;background:#fff;box-shadow:0 5px 0 var(--dj-navy);color:var(--dj-navy);font:400 22px/1.2 var(--dj-display);text-decoration:none;overflow-wrap:anywhere;transition:transform .15s,background .15s}
.dj-links a:hover{transform:translateY(-3px);background:var(--dj-sun)}
.dj-links svg{width:20px;height:20px;flex:0 0 auto}

a:focus-visible,.dj-btn:focus-visible{outline:4px solid var(--dj-orange);outline-offset:4px}

@media (max-width:1080px){
  .dj-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dj-bento .dj-mini:nth-last-child(-n+2){grid-column:auto}
  .dj-steps,.dj-tools{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .dockjam-page .shell{width:min(100% - 36px,1240px)}
  .dj-section{padding-block:80px}
  .dj-hero{padding-block:30px 110px}
  .dj-hero-grid,.dj-rewards-grid,.dj-head{grid-template-columns:1fr;gap:28px}
  .dj-head>p{margin:0}
  .dj-hero-art{height:520px;max-width:520px;width:100%;margin-inline:auto}
  .dj-phone-front{width:240px}.dj-phone-back{width:210px}
  .dj-steps,.dj-tools,.dj-links{grid-template-columns:1fr}
  .dj-card-photo{grid-column:span 2;grid-template-columns:1fr;padding-bottom:0}
  .dj-card-phone{height:300px;width:220px;margin-inline:auto}
  .dj-rewards-art{height:520px}
  .dj-cta-copy{padding:36px 28px}
  .dj-cta:after{background:linear-gradient(180deg,#0d4f8fe6 0%,#0d4f8fb3 60%,#0d4f8f66 100%)}
  .dj-strip-inner{justify-content:center}
}
@media (max-width:560px){
  .dj-bento{grid-template-columns:1fr}
  .dj-card-photo{grid-column:auto}
  .dj-cargo{gap:14px;justify-content:center}
  .dj-cargo .dj-box{width:52px;height:44px}
  .dj-hero-art{height:440px}
  .dj-phone-front{width:200px;right:0}.dj-phone-back{width:170px;left:0}
  .dj-hero-art .dj-box{width:62px;height:52px}
  .dj-sticker{width:66px}
  .dj-facts li{padding:12px 14px}
  .dj-links a{font-size:18px;padding:20px}
  .dj-actions{align-items:flex-start;flex-direction:column}
  .dj-tagline{-webkit-text-stroke-width:5px}
}
@media (prefers-reduced-motion:reduce){
  .dockjam-page *{animation:none!important;transition:none!important}
}