/* Original game artwork, shared by beginner routes and the homepage marks cards. */
.fhCardScene{position:relative;isolation:isolate;overflow:hidden;display:block;box-sizing:border-box;width:100%;height:174px;min-width:0;background:#13252a;border-bottom:1px solid #9bb18442;line-height:1;color:#eef2e9}
.fhCardScene::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 1px #f0f4d90d,inset 0 -1px #07131977}
.fhCardScene>img.fhCardMap{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;object-fit:cover;object-position:center 56%;opacity:.94;filter:saturate(.68) brightness(.9);transform:scale(1.025);transition:transform .55s ease,filter .4s ease}
.fhCardScene>.fhCardHaze{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#06131744 0%,#0b1d2010 35%,#0c1e2460 74%,#102127ee 100%),linear-gradient(90deg,#091a244a,transparent 45%,#091a2433);pointer-events:none}
.fhCardScene>.fhCardFloor{position:absolute;z-index:2;left:10%;right:10%;height:25%;bottom:0;border-radius:50%;background:radial-gradient(ellipse,#050d10a8,transparent 70%);filter:blur(3px);pointer-events:none}
.fhCardScene>img.fhCardVehicle{position:absolute;z-index:3;inset:auto 3% 0;display:block;width:94%;height:calc(100% - 20px);max-width:none;margin:0;padding:0;object-fit:contain;object-position:center 70%;filter:drop-shadow(0 12px 9px #0008);opacity:1;transform:none;transition:transform .35s ease,filter .35s ease}
.fhCardScene>.fhCardNation{position:absolute;top:12px;left:12px;z-index:5;display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 66px);height:29px;box-sizing:border-box;padding:4px 9px 4px 5px;border:1px solid #c8d3ac5e;border-radius:5px;background:linear-gradient(130deg,#0b181ee8,#16272bcf);box-shadow:0 3px 9px #0003;color:#edf2e6;font-size:10px;font-weight:750;letter-spacing:.15px;line-height:1;white-space:nowrap;backdrop-filter:blur(7px)}
.fhCardNation>img{position:static!important;display:block!important;flex:none;width:29px!important;height:19px!important;max-width:none!important;margin:0!important;padding:0!important;border:1px solid #e2dfb44a;border-radius:2px;object-fit:cover!important;filter:none!important;transform:none!important;opacity:1!important}
.fhCardNation>span{overflow:hidden;text-overflow:ellipsis;position:static;font-size:inherit;letter-spacing:inherit;color:inherit}
.fhCardScene>.fhCardLevel{position:absolute;z-index:5;top:12px;right:12px;display:grid;place-items:center;width:29px;height:29px;border:1px solid #c4cc976b;border-radius:5px;background:linear-gradient(135deg,#243228e8,#101e20e8);color:#e3e6bf;font-size:12px;font-weight:850;line-height:1;letter-spacing:0;box-shadow:0 3px 9px #0003}
@media(hover:hover){:is(.bgCard,.fm-card):hover .fhCardMap{transform:scale(1.065);filter:saturate(.78) brightness(.98)}:is(.bgCard,.fm-card):hover .fhCardVehicle{transform:translateY(-2px);filter:drop-shadow(0 14px 10px #0009)}}

/* Learning cards: edge-to-edge scenery, then a readable information panel. */
.bgGuide .bgCard{padding:0;overflow:hidden;border:1px solid #58706488;border-radius:14px;background:linear-gradient(150deg,#203438,#102127);box-shadow:0 7px 19px #0003,0 1px #c3d8ac0c inset}
.bgGuide .bgCard:hover{border-color:#b2c58a9e;box-shadow:0 12px 28px #0004,0 1px #d7e3bd1f inset}
.bgCardVisual{display:block;position:relative;flex:none;margin:0}
.bgCardBody{display:flex;flex:1;flex-direction:column;min-width:0;padding:17px 20px 18px}
.bgGuide .bgCardTop{margin-bottom:9px;min-height:18px;align-items:center;font-size:10px;color:#c4d2c9;gap:8px}
.bgGuide .bgDifficulty{border:1px solid #adc77d45;border-radius:4px;background:#b4cc7410;padding:4px 7px;color:#cfdfb1;font-size:9px;line-height:1.25}
.bgGuide .bgCard h3{font-size:25px;margin:0 0 9px;line-height:1.2}
.bgGuide .bgCard .bgSummary{min-height:0;font-size:12px;line-height:1.65;color:#b7c9c2}
.bgGuide .bgCardFacts{margin-top:14px;padding-top:13px;border-color:#9dad8130;gap:11px}
.bgGuide .bgCardFacts p{font-size:11px;line-height:1.6}.bgGuide .bgCardFacts b{font-size:10px;color:#d4dfd0}
.bgGuide .bgCardFacts p:last-child b{color:#d1bc8a}
.bgGuide .bgMiniRoute{padding:10px 0 0;margin:12px 0;font-size:10px;color:#a1b6ac}
.bgGuide .bgOpen{padding-top:13px;margin-top:auto;border-top:1px solid #9dad8130;font-size:12px}
.bgGuide .bgHeroArt{display:flex;align-items:stretch;min-height:224px;align-self:stretch;margin:0}
.bgHeroArt>.fhCardScene{height:auto;min-height:224px;border:1px solid #c0d1a840;border-radius:13px;box-shadow:0 8px 24px #0003}
.bgHeroArt>.fhCardScene>img.fhCardVehicle{height:calc(100% - 22px);width:100%;left:0;right:0;bottom:0;top:auto;transform:none}
.bgHeroArt>.fhCardScene>.fhCardHaze{background:linear-gradient(180deg,#08161c26,#10212710 40%,#102127e8 100%)}
.bgGuide .bgRouteStep{display:flex;flex-direction:column;align-items:stretch;padding:0;gap:0;border:1px solid #53705e7d;overflow:hidden;border-radius:10px;background:linear-gradient(135deg,#1b3033,#11232a)}
.bgRouteStep>.fhCardScene{height:112px;min-height:112px;flex:none}
.bgRouteStep .fhCardNation{top:9px;left:9px;height:25px;font-size:9px;padding-right:7px;max-width:calc(100% - 47px)}
.bgRouteStep .fhCardNation img{width:24px!important;height:16px!important}
.bgRouteStep .fhCardLevel{top:9px;right:9px;width:24px;height:25px;font-size:10px}
.bgRouteStep .fhCardVehicle{height:calc(100% - 12px);width:90%;left:5%;right:5%}
.bgStepBody{display:flex;flex:1;flex-direction:column;padding:13px 15px 15px;min-width:0}
.bgGuide .bgStepBody h3{font-size:16px;line-height:1.3}.bgGuide .bgStepBody small{font-size:10px;color:#a3b7af}
.bgGuide .bgStepLinks{margin-top:10px;gap:5px;font-size:10px}

/* Homepage: existing ranking, controls, numbers and links stay in place. */
.fm-opportunities .fm-card{padding:0;overflow:hidden;border:1px solid #5c776786;background:linear-gradient(150deg,#203638,#102127);box-shadow:0 7px 18px #0003,0 1px #c3d8ac0b inset}
.fm-opportunities .fm-card:hover{border-color:#b4ce8f99;box-shadow:0 12px 24px #0004}
.fm-opportunities .fm-card-head{height:auto;min-height:47px;margin:0;padding:10px 16px;background:linear-gradient(120deg,#1e3438,#172b2f);border-bottom:1px solid #a8bb8a24;gap:8px}
.fm-opportunities .fm-rank{border-color:#8fa9716b;color:#d6e1bd;background:#879c4820;font-size:10px}
.fm-opportunities .fm-tank{display:block;position:relative;min-height:0;margin:0;text-decoration:none!important}
.fm-opportunities .fm-tank .fhCardScene{height:133px}
.fm-opportunities .fm-tank>h3{font-size:20px!important;line-height:1.25!important;padding:13px 17px 12px!important;margin:0!important;letter-spacing:-.4px;min-width:0}
.fm-opportunities .fm-tank .fhCardVehicle{height:calc(100% - 15px);object-fit:contain}
.fm-opportunities .fm-tank .fhCardNation{max-width:calc(100% - 24px)}
.fm-opportunities .fm-values{margin:0 17px;padding-top:12px;border-top-color:#a1b58b2e}
.fm-opportunities .fm-before{padding:0 17px;margin-bottom:13px!important}
.fm-opportunities .fm-card footer{margin:0;padding:0 17px;background:#07161a50;border-top-color:#a1b58b2e;min-height:45px}
.fm-opportunities .fm-decline{font-size:17px;color:#c0e59c}
@media(max-width:1250px){.bgCardBody{padding:15px 16px 16px}.bgGuide .bgCard h3{font-size:23px}.bgGuide .bgCard .fhCardScene{height:158px}.fm-opportunities .fm-card-head{padding:9px 13px}.fm-opportunities .fm-tank>h3{padding:12px 14px!important;font-size:18px!important}.fm-opportunities .fm-values{margin:0 14px}.fm-opportunities .fm-before{padding:0 14px}.fm-opportunities .fm-card footer{padding:0 14px}.fm-opportunities .fm-tank .fhCardScene{height:124px}}
@media(max-width:1050px){.bgHeroArt>.fhCardScene{min-height:210px}.bgHeroArt>.fhCardScene .fhCardNation>span{display:none}.bgHeroArt>.fhCardScene .fhCardNation{padding-right:5px}.fm-opportunities .fm-tank .fhCardScene{height:136px}}
@media(max-width:650px){.bgGuide .bgHeroArt{min-height:180px;height:180px;margin:20px 0 0}.bgHeroArt>.fhCardScene{min-height:180px}.bgHeroArt>.fhCardScene .fhCardNation>span{display:block}.bgHeroArt>.fhCardScene .fhCardNation{padding-right:9px}.bgGuide .bgCard .fhCardScene{height:180px}.bgCardBody{padding:17px 19px 18px}.bgGuide .bgCard h3{font-size:25px}.bgGuide .bgCardFacts p{font-size:12px}.bgGuide .bgRouteStep{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:stretch}.bgRouteStep>.fhCardScene{height:100%;min-height:125px;border-bottom:0;border-right:1px solid #9bb18442}.bgRouteStep .fhCardNation{top:7px;left:7px;max-width:40px;padding:3px 4px}.bgRouteStep .fhCardNation>span{display:none}.bgRouteStep .fhCardLevel{top:7px;right:7px;width:22px;height:24px}.bgRouteStep .fhCardVehicle{height:calc(100% - 28px);width:100%;left:0;right:0;bottom:0}.bgGuide .bgStepBody{padding:16px 12px}.bgGuide .bgStepBody h3{font-size:16px}.bgGuide .bgStepLinks{font-size:10px}.fm-opportunities .fm-tank .fhCardScene{height:154px}.fm-opportunities .fm-tank>h3{font-size:22px!important;padding:13px 17px!important}.fm-opportunities .fm-card-head{padding:10px 16px}.fm-opportunities .fm-values{margin:0 17px}.fm-opportunities .fm-before{padding:0 17px}.fm-opportunities .fm-card footer{padding:0 17px}}
@media(prefers-reduced-motion:reduce){.fhCardScene>img.fhCardMap,.fhCardScene>img.fhCardVehicle,.bgGuide .bgCard,.fm-opportunities .fm-card{transition:none!important}:is(.bgCard,.fm-card):hover .fhCardMap{transform:scale(1.025)}:is(.bgCard,.fm-card):hover .fhCardVehicle{transform:none}}