/* A departure board: the next departure leads, the animated route follows. */
#page-home .departure-card,#page-ferry .departure-card{padding:20px!important;border-radius:22px!important}
.departure-card-heading{display:flex!important;justify-content:space-between;align-items:center;margin-bottom:16px!important}
.departure-card-heading>span:first-child{font-size:16px!important;line-height:1.4!important;padding:6px 12px!important;border-radius:30px!important;font-weight:900!important}
.departure-time-eyebrow{font-size:14px;color:#e3fff5;line-height:1.5;letter-spacing:0;margin:0 0 5px;font-weight:700}
.departure-time-layout{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:13px!important;min-width:0}
.departure-time-layout>div:first-child{flex:1;min-width:0}
.departure-primary{display:block!important;line-height:1.15!important;letter-spacing:0!important}
.departure-card .ferry-departure-line{display:block!important;font-size:30px!important;line-height:1.25!important;font-weight:900!important;word-break:keep-all}
.departure-card .ferry-departure-clock{font-size:clamp(40px,10vw,56px)!important;font-weight:950;line-height:1.1!important;font-variant-numeric:tabular-nums;letter-spacing:-1.5px}
.departure-card .ferry-departure-label{font-size:16px!important;line-height:1.4!important;display:inline-block!important;letter-spacing:0;margin-left:5px}
.departure-card .departure-detail{font-size:13px!important;line-height:1.65!important;opacity:.95!important;margin-top:9px!important;word-break:keep-all}
.departure-card .departure-countdown{flex:0 0 auto;background:#ffffffed!important;color:#155e50!important;border:0!important;border-radius:15px!important;padding:11px!important;min-width:62px;box-sizing:border-box;text-align:center}
.departure-card .departure-countdown>[id^=remainMin]{font-size:29px!important;line-height:1.15!important;letter-spacing:-.5px}
.departure-card .departure-countdown>div:last-child{font-size:12px!important;line-height:1.4!important;margin-top:4px!important}
.departure-card[data-direction=outgoing] .departure-countdown{color:#165285!important}
.departure-route{background:#faffff;color:#125847;border-radius:16px;padding:13px 14px 4px;margin:14px 0;overflow:clip}
.departure-card[data-direction=outgoing] .departure-route{color:#16558b}
.departure-ports{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.departure-ports>div{max-width:47%;display:flex;align-items:center;gap:7px}
.departure-ports>div:last-child{justify-content:flex-end;text-align:right}
.departure-ports>div>span{font-size:26px;line-height:1.2}
.departure-ports strong{font-size:17px;line-height:1.5;font-weight:900;word-break:keep-all}
.departure-track{position:relative;height:51px;margin:0 8px;overflow:clip}
.departure-track:before{content:'';position:absolute;left:0;right:0;bottom:10px;border-bottom:2px dashed #a5c9c0}
.departure-traveler{position:absolute;width:68px;height:45px;bottom:4px;left:0;animation:trip-sail-in 7s linear infinite;animation-play-state:var(--route-motion,paused);will-change:left,opacity}
.departure-traveler img{width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;transform-origin:center;animation:none!important}
.departure-card[data-direction=outgoing] .departure-traveler{animation-name:trip-sail-out}
.departure-card[data-direction=outgoing] .departure-traveler img{transform:scaleX(-1)}
@keyframes trip-sail-in{0%{left:-40px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 28px);opacity:0}}
@keyframes trip-sail-out{0%{left:calc(100% - 28px);opacity:0}12%{opacity:1}88%{opacity:1}100%{left:-40px;opacity:0}}
.departure-card .home-harbor-notice{margin-top:10px;padding:13px!important;background:#ffffff12!important;border:1px solid #ffffff25}
.departure-card .home-harbor-notice strong{font-size:15px!important;animation:none!important}
.departure-card .home-harbor-notice p{font-size:13px!important;line-height:1.65!important}
.departure-card [id^=ferryLastInfo]{font-size:15px!important;line-height:1.7!important;padding:10px 12px!important;border-radius:11px!important;margin-top:11px!important}
@media(max-width:350px){#page-home .departure-card,#page-ferry .departure-card{padding:16px!important}.departure-ports strong{font-size:15px}.departure-ports>div{gap:4px}.departure-ports>div>span{font-size:22px}.departure-card .ferry-departure-line{font-size:26px!important}.departure-card .ferry-departure-label{display:block!important;margin:5px 0 0}.departure-route{padding:12px 10px 3px}.departure-card-heading>span:first-child{font-size:15px!important}}

/* The offer, ticket journey and real coupon form one readable card. */
#page-dalkom .customer-journey .coupon-offer-header{padding:19px 18px 4px!important;display:flex!important;align-items:center;gap:8px!important;background:#fff6e9!important}
#page-dalkom .customer-journey .coupon-offer-header>div:first-child{flex:1 1 auto!important}
#page-dalkom .customer-journey .coupon-offer-header>div:first-child>div:first-child{font-size:14px!important;margin-bottom:3px!important}
#page-dalkom .customer-journey .coupon-offer-header>div:first-child>div:nth-child(2){font-size:20px!important}
#page-dalkom .customer-journey .coupon-offer-header>div:first-child>div:nth-child(2)>span{font-size:38px!important}
#page-dalkom .customer-journey .coupon-offer-header>div:last-child{width:auto!important;margin:0!important;flex:0 1 135px!important}
#page-dalkom .customer-journey .coupon-offer-header>div:last-child>div:first-child{font-size:12px!important}
#page-dalkom .customer-journey .coupon-offer-header>div:last-child>div:last-child{font-size:14px!important}
#page-dalkom .customer-journey .coupon-film{padding:0 12px 6px!important;background:#fff3e3}
#page-dalkom .customer-journey .coupon-canvas{display:block!important;min-height:0!important;margin:0 -12px}
#page-dalkom .customer-journey .customer-story-art{position:relative;display:block;width:100%;max-width:none!important;aspect-ratio:8/5;border-radius:0;overflow:hidden;background:#fff3e3}
.customer-story-art canvas{display:block;width:100%!important;height:100%!important;aspect-ratio:8/5;pointer-events:none}
#page-dalkom .customer-journey .coupon-caption{margin-top:0;min-height:42px;padding:8px 10px}
#page-dalkom .customer-journey .coupon-caption strong{font-size:15px!important}
#page-dalkom .customer-journey .coupon-journey-steps button{font-size:14px;min-height:44px;padding:8px 4px}
#page-dalkom .customer-journey .coupon-journey-steps{gap:6px}
#page-dalkom .customer-journey .coupon-journey-steps button span{word-break:keep-all;overflow-wrap:normal}
@media(max-width:380px){#page-dalkom .customer-journey .coupon-journey-steps button{font-size:12px;gap:3px;padding:8px 3px}}
#page-dalkom .customer-journey .coupon-proof{position:relative;margin:16px auto!important;overflow:visible}
#page-dalkom .customer-journey{overflow:visible!important}
#page-dalkom .customer-journey .coupon-flight{border:0!important;background:none!important;box-shadow:none!important;aspect-ratio:auto!important;animation:none!important;transform-origin:center}
@media(max-width:420px){#page-dalkom .customer-journey .coupon-offer-header{display:block!important;padding:16px 14px 2px!important}#page-dalkom .customer-journey .coupon-offer-header>div:last-child{display:flex!important;align-items:center;gap:8px!important;margin:8px 0 0!important}#page-dalkom .customer-journey .coupon-offer-header>div:last-child>div:first-child{margin:0!important}#page-dalkom .customer-journey .coupon-offer-header>div:last-child>div:last-child{font-size:13px!important}}
/* Wake and hull share the same moving coordinate system. */
.ferry-sailing-scene.ocean-scene{height:265px}
.sailing-craft{position:absolute;left:0;top:0;z-index:3;will-change:transform;transform-origin:50% 70%;pointer-events:none}
.ocean-scene .sailing-craft .sailing-vessel{width:100%!important;height:100%!important;left:0!important;top:0!important;transform:none!important;filter:none!important;mask-image:linear-gradient(#000 0 72%,#0009 78%,transparent 85%);-webkit-mask-image:linear-gradient(#000 0 72%,#0009 78%,transparent 85%)}
.ocean-scene .sailing-craft .ocean-wake{width:58%!important;height:12%!important;left:-46%!important;top:63%!important;object-fit:fill!important;transform-origin:100% 50%;z-index:2;opacity:.5}
.dolphin-window{position:absolute;left:0;right:0;top:0;height:91%;overflow:clip;z-index:4;pointer-events:none}
.ocean-scene .ocean-dolphin{height:auto!important;max-width:none!important;filter:drop-shadow(0 2px 2px #05546c15);transform-origin:50% 65%}
.ocean-scene .dolphin-splash{position:absolute;height:17px!important;object-fit:fill!important;pointer-events:none;z-index:4;opacity:0}
@media(max-width:350px){.ferry-sailing-scene.ocean-scene{height:240px}}
/* Legacy timetable ID rules must not shrink the primary clock. */
:is(#page-home,#page-ferry) .departure-card .ferry-departure-clock{display:inline!important;font-size:clamp(40px,10vw,56px)!important;line-height:1.1!important;letter-spacing:-1px!important}
:is(#page-home,#page-ferry) .departure-card .ferry-departure-label{font-size:16px!important;display:inline-block!important;line-height:1.4!important}
.departure-card .departure-route{display:block!important}
.departure-card .departure-detail,.departure-card .home-harbor-notice p{font-size:14px!important}
.departure-old-progress{display:none!important}
:is(#page-home,#page-ferry) .departure-card-heading>span:first-child{font-size:16px!important}

/* Port names stay on one line; the moving boat alone shows direction. */
.departure-ports>div{max-width:none;flex:0 1 auto;min-width:0}
.departure-ports strong{white-space:nowrap}
.departure-ports>div>span{flex:0 0 auto}
@media(max-width:350px){.departure-ports{gap:8px}.departure-ports strong{font-size:15px}.departure-ports>div>span{font-size:20px}.departure-ports>div{gap:4px}}